<template>
    <div class="warp">
        <div class="title">
            非机动车出入管理
        </div>
        <div class="entry-line" :style="{ width: entryLineWidth + '%'}"></div>
        <div class="exit-line" :style="{ width: exitLineWidth + '%'}"></div>
        <div class="desc">
            <div>
                <ul>
                    <li class="box-g"></li>
                    <li class="txt">进</li>
                    <li class="num">{{entryNum}}</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li class="box-y"></li>
                    <li class="txt">出</li>
                    <li class="num">{{exitNum}}</li>
                </ul>
            </div>

        </div>
    </div>
</template>
<script>
export default{
  props: ['in', 'out'],
  data () {
    return {
      entryLineWidth: 0, // 进入的进度条长度
      exitLineWidth: 0, // 出去的进度条长度
      entryNum: 0, // 进入数量
      exitNum: 0 // 出去数量
    }
  },
  watch: {
    in () {
      this.initPage()
    }
  },
  mounted () {
    this.initPage()
  },
  methods: {
    initPage () {
      let total = this.in + this.out
      this.entryLineWidth = 100 * (this.in / total)
      this.exitLineWidth = 100 * (this.out / total)

      this.entryNum = this.in
      this.exitNum = this.out
    }
  }
}
</script>
<style lang="less" scoped>
@primary-green: #50E3C2;
@primary-grass-green: #B8E986;
.skin-white{
    .title{
        color: #4C6072!important;
    }
}
.warp{
    padding: 20px;
    color: #fff;
    .title{
        font-size: 14px;
        margin-bottom: 12px;
    }
    .entry-line, .exit-line{
        margin-bottom: 10px;
        height: 10px;
    }
    .entry-line{
        background-color: @primary-green;
    }
    .exit-line{
        background-color: @primary-grass-green;
    }
}
.desc{
    padding-top: 6px;
    width: 100%;
    height: 16px;
    line-height: 16px;
    vertical-align: middle;
    >div{
        width:50%;
        float: left;
        ul{
            display: inline-block;
        }
        li{
            float: left;
        }
        .txt{
            margin-left: 10px;
        }
        .num{
            width: 70px;
            text-align: right;
            color: @primary-green;
        }
        .box-g, .box-y{
            margin-top: 4px;
            width: 8px;
            height: 8px;
            border-radius: 2px;
        }
        .box-g{
            background-color: @primary-green;
        }
        .box-y{
            background-color: @primary-grass-green;
        }

    }
}
</style>
